<template>
<div>
    <!-- 面包屑组件 -->
    <breadcrumb :navData="navData"></breadcrumb>

    <el-card>
        <!-- 搜索框 -->
        <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple">
                <el-input placeholder="请输入内容" v-model="query" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div></el-col>
            <el-col :span="16"><div class="grid-content bg-purple-light">
                <el-button type="primary" @click="$router.push('/add')">添加商品</el-button>
            </div></el-col>
        </el-row>

        <!-- 商品列表 -->
        <el-table :data="goodsList" border stripe style="width: 100%;">
            <el-table-column type="index" label="#">
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="goods_price" label="商品价格">
            </el-table-column>
            <el-table-column prop="goods_weight" label="商品重量">
            </el-table-column>
            <el-table-column prop="add_time" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 编辑 -->
                    <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    @click="editOne(scope.row.id)"></el-button>
                    <!-- 删除 -->
                    <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="delOne(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </el-card>
</div>

</template>

<script>
export default {
  components: {},
  data() {
    return {
      //面包屑数据
      navData: ["商品管理", "商品列表"],

      goodsList: [],
      query: "", //搜索的关键词 可以为空
      pagenum: 1, //当前的页码  默认是第1页  不可以为空
      pagesize: 5, //每页显示的条数 默认是5条   不可以为空
      total: 0, //总数量

      //添加的数据
      addDialog: false, //添加的弹框
      addForm: {
        //添加的数据
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      addRules: {
        //添加的规则
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "手机号不正确,请重新输入",
            trigger: "blur"
          }
        ]
      },
    };
  }, // 组件方法

  methods: {
    //请求列表数据
    async getList() {
      let res = await this.$http.get("/goods", {
        params: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      });
      console.log("res_list", res);
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.goodsList = res.data.goods;
      this.total = res.data.total;
    },

    //点击确定添加
    submitAddForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await this.$http.post("/users", this.addForm);
          // console.log("add", res);
          if (res.meta.status == 201) {
            this.getList();
            this.addDialog = false;
            this.$message.success(res.meta.msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 分页
    handleSizeChange(newSize) {
      this.pagesize = newSize;
      this.getList();
    },
    handleCurrentChange(current) {
      this.pagenum = current;
      this.getList();
    },

    //搜索
    search() {
      this.pagenum = 1;
      this.getList();
      this.query = "";
    }
  },

  created() {
    this.getList();
  }
};
</script> 

<style   scoped>
</style>